// vue的路由的使用

// Vue Router 是 Vue 官方的客户端路由解决方案。
// 客户端路由的作用是在单页应用(SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

// 安装vue-router
// npm i 包名@版本号
//npm i 包名@3.5.3  --save(生产模式，最终上线也要使用的插件)
// npm i vue-router@3 --save  (生产模式)
//1. 导入vue 
import Vue from 'vue'

//2 导入路由文件
import VueRouter from 'vue-router'
// 导入主页组件
// vue-cli的架构中 自动将项目的src 文件夹默认路径别名配置成了@ 
import Home from '@/views/Home/index.vue'

// 3. 使用路由 插件
// vue使用全局插件的方法  Vue.use(插件,{插件的配置})
Vue.use(VueRouter)

// 4 准备路由配置  书写页面的跳转规则的 准备好路由表
const routes = [
  { //进入项目默认访问的内容 用重定向标识
    path: "/",//默认进入的地址
    redirect: "/index"//重定向到哪个页面
  },
  { //一个对象代表一个页面的跳转规则   首页
    path: "/index",//跳转的路径
    name: "Index",//路由的名字，可以根据name跳转
    component: Home// 跳转到的组件
  },
  { //关于页面
    path: "/about",
    name: "About",
    // 组件的按需加载---提高页面性能 只有组件在被访问时候才会加载
    // component:()=>import("组件的路径")
    component: () => import("@/views/About//index.vue")
  }
]

// 5 创建路由实例
const router = new VueRouter({
  // routes: routes
  routes //路由配置项
})
// 6 导出路由对象
export default router